<template>
    <div class="app-container">
        <!-- 基础信息 -->
        <h5 class="titleInfo">
            基础信息
        </h5>
        <el-form class="form" ref="form" :rules="rules" :model="form" label-width="130px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="会员手机号" prop="username">
                        <el-input v-model="form.username"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="昵称" prop="nickName">
                        <el-input v-model="form.nickName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="地区" prop="province">
                        <el-cascader
                            :options="options"
                            v-model="selectedOptions"
                            @change="pcaList">
                        </el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="真实姓名">
                        <span class="spanToInput">{{list1.realname | filterNull}}</span>
                        <!-- <el-input v-model="form.nickName"></el-input> -->
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <!-- 推荐人信息 -->
        <div class="divBar"></div>
        <h5 class="titleInfo">
            推荐人信息
        </h5>
        <el-form ref="list1" :inline="true" :model="list1" label-width="130px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="推荐人姓名">
                        <span class="spanToInput">{{list1.refereeName | filterNull}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="推荐人手机号">
                        <span class="spanToInput">{{list1.referee | filterNull}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <!-- 实名认证信息 -->
        <div class="divBar"></div>
        <h5 class="titleInfo">
            实名认证信息
        </h5>
        <el-form ref="list1" :inline="true" :model="list1" label-width="130px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="证件类型">
                        <span class="spanToInput">{{list1.identityType | cardNull}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="证件号码">
                        <span class="spanToInput">{{list1.identity | filterNull}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <!-- 银行卡信息 -->
        <div class="divBar"></div>
        <h5 class="titleInfo">
            银行卡信息
        </h5>
        <el-form :inline="true" label-width="130px">
            <el-row v-for="(val,index) in list2" :key="index">
                <el-col :span="12">
                    <el-form-item label="开户行">
                        <span class="spanToInput">{{val.bankName | filterNull}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="银行卡号">
                        <span class="spanToInput">{{val.cardNumber | filterNull}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row  v-if="list2.length==0">
                <el-col :span="12">
                    <el-form-item label="开户行">
                        <span class="spanToInput">暂无</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="银行卡号">
                        <span class="spanToInput">暂无</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item>
                <el-button style="margin-left:130px" type="primary" @click="submitFn('form')" >立即提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { vipInfo } from '@/api/vipInfo'
import { editVip } from '@/api/editVip'
// 手机号正则
const phoneReg = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("请输入会员手机号"));
  } else {
    const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
    if (reg.test(value)) {
      callback();
    } else {
      return callback(new Error('手机格式错误'))
    }
  }
}

export default {
    name:"editVip",
    data(){
        return {
            userId:"",
            form:{},
            rules: {
                username: [
                    { required: true, validator: phoneReg, trigger: 'blur' },
                ],
                nickName: [
                    { required: true, message: '请输入昵称', trigger: 'blur' },
                ],
                province:[
                    { required: true, message: '请输入省市区', trigger: 'blur' },
                ]
            },
            options: [],
            selectedOptions: [],
            list1:{},
            list2:[],
            submitForm:{}
        }
    },
    filters:{
        filterNull(e) {
            if(!e){
                return "暂无"
            }else{
                return e
            }
        },
        cardNull(e){
            return window.helper.cardType(e)
        },
    },
    mounted(){
        this.userId = Number(this.$route.query.userId)
        // 省市区数据获取
        var addData = require('../../../../static/address/area.json')
        this.options = addData
        this.getList()
    },
    methods:{
         // 省市区数据改变
        pcaList(value) {
            let e = this.selectedOptions
            e = value
            this.form.province = e[0]
            this.form.city = e[1]
            this.form.area = e[2]
        },
        //获取列表数据
        getList(){
            let datas = {userId:this.userId}
            vipInfo(datas).then().then(res =>{
                if(!res.data.code){
                    let rd =res.data.data
                    if(rd.user){
                        this.list1 = rd.user
                        this.form = rd.user
                        this.selectedOptions = [
                            rd.user.province,
                            rd.user.city,
                            rd.user.area
                        ]
                    }
                    if(rd.bankCard){
                        this.list2 = rd.bankCard
                    }
                }else{
                    this.$message.error("数据接口访问失败");
                }
            })
            .catch(error =>{
                this.$message.error(error);
            })
        },
        // 修改提交
        submitFn(e){
            this.$refs[e].validate((valid) => {
                if (valid) {
                    this.submitForm = {
                        userId:this.userId,
                        username:this.form.username,
                        nickName:this.form.nickName,
                        province:this.form.province,
                        city:this.form.city,
                        area:this.form.area,
                    }
                    let datas = this.submitForm
                    editVip(datas).then().then(res =>{
                        if(!res.data.code){
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            this.$router.push('/vipIndex')
                        }else{
                            this.$message.error("数据接口访问失败");
                        }
                    })
                    .catch(error =>{
                        this.$message.error(error);
                    })
                }else{
                    this.$message({
                        message: '有必填项没填，不能提交咯',
                        type: 'warning'
                    });
                }
            })
        }
    }
}
</script>
<style scoped>
    .app-container{padding: 0px!important}
</style>
